/**
 * 报表
 * */

var table;
layui.use(['table'], function () {
    table = layui.table;
})



// 学校层次统计
var chartDom;
var myChart;
var option;

function optDataBarGraph(dataGraphId, sourceData, title, formatter) {
    chartDom = document.getElementById(dataGraphId);
    myChart = echarts.init(chartDom);

    option = {
        color: [
            new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {offset: 0, color: '#7cd4fd'},
                {offset: 1, color: '#6d95ff'}
            ]),
            new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {offset: 0, color: '#8363f9'},
                {offset: 1, color: '#ee70e9'}
            ]),
            "#15b1ff"
        ],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            },
            formatter: formatter
        },
        dataset: {
            source: sourceData
        },
        legend: {
            right: '120px'
        },
        xAxis: {
            type: "category",
            axisTick: {
                alignWithLabel: true
            },
            inverse: true  // 反向显示数据
        },
        yAxis: {
            name: title
        },
        series: [{
            type: "bar",
            seriesLayoutBy: "row"
        }, {
            type: "bar",
            seriesLayoutBy: "row"
        }, {
            type: "line",
            seriesLayoutBy: "row"
        }]
    }
    option && myChart.setOption(option);
}

// 学校层次统计(按地市)
function optDataAcrossBarGraph(dataGraphId, sourceData, title, unit) {
    chartDom = document.getElementById(dataGraphId);
    myChart = echarts.init(chartDom);

    option = {
        color: [
            new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {offset: 0, color: '#ff6991'},
                {offset: 1, color: '#fda07e'}
            ]),
            new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {offset: 0, color: '#2f8def'},
                {offset: 1, color: '#3ec5f4'}
            ]),
        ],
        title: {},
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            formatter: function (params) {

                function trend(data){
                    if(data == 1){
                        return '<font color="red">↑</font>';
                    }else if(data == 2){
                        return '<font color="#adff2f">↓</font>';
                    }else{
                        return '';
                    }
                }

                let secondaryPosition = params[0];
                let vocationalSchool = params[1];

                let trends = secondaryPosition.data[3]

                return `
                            <span style='font-weight:bold;'>${secondaryPosition.axisValue}</span><br/>
                            &nbsp;&nbsp;&nbsp;${secondaryPosition.seriesName}：${secondaryPosition.data[1]}${unit} ${trend(trends[0])}<br/>
                            &nbsp;&nbsp;&nbsp;${vocationalSchool.seriesName}：${vocationalSchool.data[2]}${unit} ${trend(trends[1])}<br/>
                            &nbsp;&nbsp;&nbsp;合计：${vocationalSchool.data[1] + vocationalSchool.data[2]}${unit} ${trend(trends[2])}<br/>
                        `;
            }
        },
        dataset: {
            source: sourceData
        },
        dataZoom: [
            {    // 滑动
                type: 'slider',
                show: false,      //开启
                yAxisIndex: [0],
                left: '96%',  //滑动条位置
                start: 100,    //初始化时，滑动条宽度开始标度
                end: 60      //初始化时，滑动条宽度结束标度
                ,width: 13   // 滚动条宽度
                ,showDetail: false  // 拖动滚动条，上下不会显示数据
                ,showDataShadow: false  // 去除滚动条里鼠标十字
                ,brushSelect: false // 是否开启刷选功能,旁边的滑动提示框
                ,zoomLock: false   // 滚动条不能缩放
                // ,orient: 'vertical'
                // ,handleSize: 0   // 滚动条顶部和尾部的小点
                // ,backgroundColor: '#fff'
                // ,startValue: 0    // 滚动条对应的大小
                // ,endValue: 5      // 滚动条对应的大小
            },
            //y轴内置滑动
            {
                type: 'inside',  //内置滑动，随鼠标滚轮展示
                yAxisIndex: [0],
                start: 100,//初始化时，滑动条宽度开始标度
                end: 70,  //初始化时，滑动条宽度结束标度
                zoomOnMouseWheel: false,   // 鼠标滚轮不会放大缩小
                moveOnMouseMove:true,
                moveOnMouseWheel:true,
                // orient: 'vertical'
            }
        ],
        legend: {
            right: '45px'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            name: title,
            nameLocation: 'center',
            nameGap: 30,
            position: 'top',
            boundaryGap: [0, 0.01],
            axisLine: {
                show: true
            },
            axisTick: {
                show: true
            },
            // 是否显示报表中数据分割线
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'category',
            axisTick: {
                alignWithLabel: true
            },
            // 是否显示类目的边线
            axisLine: {
                show: false
            },
            // 是否显示数据刻度的脚线
            axisTick: {
                show: false
            }
        },
        series: [
            {
                type: 'bar',
                // 数据源中，以行为一段
                seriesLayoutBy: "row",
                // 两个柱状之间的间距
                stack: 'total',
                barWidth: 16,
                showBackground: true,
                backgroundStyle: {
                    color: '#f4f4f4'
                }
            },
            {
                type: 'bar',
                seriesLayoutBy: "row",
                // 两个柱状之间的间距
                stack: 'total',
                barWidth: 16,
                showBackground: true,
                backgroundStyle: {
                    color: '#f4f4f4'
                }
            }
        ]
    };

    option && myChart.setOption(option);

}
